<template>
  <div class="container">
    <div class="box">
      <span>
        css变量 : 
      </span>
      <div class="variable"></div>
    </div>
    <div class="box">
      <span>
        @extend引入用法 : 
      </span>
      <div class="extend"></div>
    </div>

    <div class="flow">
      <p>
        首先安装依赖: npm install sass-resources-loader --save-dev
      </p>
      <p>案例:
        <a target="_black" href="https://www.cnblogs.com/dianzan/p/10621586.html">
          https://www.cnblogs.com/dianzan/p/10621586.html
        </a>       
      </p>
      <p>在项目build文件夹里找到utils.js ，定位到下边代码</p>
      
      <p class="cont">
        return { <br>
        &nbsp;&nbsp;css: generateLoaders(),<br>
        &nbsp;&nbsp;postcss: generateLoaders(),<br>
        &nbsp;&nbsp;less: generateLoaders('less'),<br>
        &nbsp;&nbsp;sass: generateLoaders('sass', { indentedSyntax: true }),<br>
        &nbsp;&nbsp;scss: generateLoaders('sass'),<br>
        &nbsp;&nbsp;stylus: generateLoaders('stylus'),<br>
        &nbsp;&nbsp;styl: generateLoaders('stylus')<br>
        }
      </p>
      <p>
        把上面这句scss: generateLoaders('sass'),改成如下
      </p>
      <p class="cont">
        scss: generateLoaders('sass').concat(<br>
          &nbsp;&nbsp;{<br>
          &nbsp;&nbsp;&nbsp;&nbsp;loader: 'sass-resources-loader',<br>
          &nbsp;&nbsp;&nbsp;&nbsp;options: {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resources: path.resolve(__dirname, '../src/assets/css/all.scss')//这里按照你的文件路径填写<br>
          &nbsp;&nbsp;&nbsp;&nbsp;}<br>
          &nbsp;&nbsp;}<br>
        )
      </p>

      <p>
        修改后的代码是
      </p>
      <p class="cont">
        return {<br>
        &nbsp;&nbsp;css: generateLoaders(),<br>
        &nbsp;&nbsp;postcss: generateLoaders(),<br>
        &nbsp;&nbsp;less: generateLoaders('less'),<br>
        &nbsp;&nbsp;sass: generateLoaders('sass', { indentedSyntax: true }),<br>
        &nbsp;&nbsp;scss: generateLoaders('sass').concat(<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loader: 'sass-resources-loader',<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options: {<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resources: path.resolve(__dirname, '../src/assets/css/all.scss')//这里按照你的文件路径填写<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
        &nbsp;&nbsp;&nbsp;&nbsp;}<br>
        &nbsp;&nbsp;),<br>
        &nbsp;&nbsp;stylus: generateLoaders('stylus'),<br>
        &nbsp;&nbsp;styl: generateLoaders('stylus')<br>
        }
      </p>
    </div>


    

    
  </div>
</template>
<script>
export default {
  data() {
    return {

    };
  },
  methods: {
     
  }
};
</script>

<style scoped lang="scss">
// 变量在 variable.scss文件里
// 变量用法
.box{
  span{
    width: 150px;
    height: 40px; 
    line-height: 40px; 
    float: left;  
    color:$box-color;
  }
  // 变量用法
  .variable{
    width: 200px;
    height: 40px;
    display: inline-block;
    background-color: $box-background-color;
  }
  // 引入样式
  .extend{
    display: inline-block;
    @extend .style;
  }
  
}
.flow{
  width: 100%;
  .cont{
    color:$flow-color;
  }
}



</style>
